<template>
  <transition name="el-zoom-in-center">
    <div class="component-keycode" v-if="show">
      <span>{{ data }} <i v-show="push" class="iconfont icon-success-max" /> </span>
    </div>
  </transition>
</template>

<script>
import { ref, onUnmounted, nextTick } from 'vue'
import app from '@/app'

export default {
  props: ['window'],
  setup(props, context) {
    // 显示
    const show = ref(false)
    // 内容
    const data = ref('')
    // 推送
    const push = ref('')

    // 显示内容
    const showData = value => {
      data.value += value.toString()
      // 判断是否显示窗口
      if(props.window) {
        show.value = true
      }
    }

    // 清空内容
    const emptyData = () => {
      data.value = ''
      show.value = false
      push.value = false
    }

    // 推送内容
    const pushData = async (name) => {
      // 标识
      push.value = true

      // 等待标识
      await nextTick()
      context.emit(name, data.value)

      // 清空
      emptyData()
    }

    // 键盘触发
    const keyEvent = {
      8: () => pushData('back'),
      13: () => pushData('ok'),
      17: () => pushData('ctrl'),
      27: () => {
        emptyData()
        pushData('esc')
      },
      32: () => pushData('space'),

      33: () => pushData('pageup'),
      34: () => pushData('pagedown'),
      35: () => pushData('end'),
      36: () => pushData('home'),
      45: () => pushData('insert'),
      46: () => pushData('delete'),

      37: () => pushData('left'),
      38: () => pushData('up'),
      39: () => pushData('right'),
      40: () => pushData('down'),

      106: () => pushData('mul'),
      107: () => pushData('add'),
      109: () => pushData('sub'),
      111: () => pushData('div'),
    }

    // F功能区
    const fKeyEvent = code => {
      if(code > 111 && code < 124) {
        // 算出F几
        code = code - 111
        context.emit('f', code, data.value)
        pushData('f' + code)
        return true
      }
    }

    // 键盘累加
    const keyValue = [
      // 数字区
      code => code >= 48 && code <= 57,
      // 字母区
      code => code >= 65 && code <= 90,
      // 小数字区
      code => code >= 96 && code <= 105,
      // 小数点
      code => code == 110,
    ]

    // 事件方法
    const handle = e => {
      // 有控件的输入
      if(e.target.tagName == 'INPUT') {
        // 控件判断
        if(!['button', 'checkbox', 'radio'].includes(e.target.type)) {
          // 清空内容
          return emptyData()
        }
      }

      // 键码
      const code = e.keyCode

      // 如果有事件，将返回
      if(keyEvent[code]) {
        return keyEvent[code]()
      }

      // 如果为F功能区
      if(fKeyEvent(code)) return

      // 累加内容
      for (const i in keyValue) {
        // 是否为正确
        if (keyValue[i](code)) {
          return showData(e.key)
        }
      }
    }

    // 卸载组件
    onUnmounted(() => {
      // 移除事件
      document.removeEventListener('keyup', handle)
    })

    const run = async () => {
      await nextTick()

      // 添加事件
      document.addEventListener('keyup', handle)
    }

    run()

    return {
      lang: app.lang,
      show,
      data,
      push
    }
  }
}
</script>